<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>PDF.js 示例</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <h1>PDF.js 上一页/下一页示例</h1>

    <p>
      请在生产环境中使用
      <a href="https://mozilla.github.io/pdf.js/getting_started/#download"><i>官方发布</i></a>
      版本。
    </p>

    <div>
      <button id="prev">上一页</button>
      <button id="next">下一页</button>
      &nbsp; &nbsp;
      <span>页码: <span id="page_num"></span> / <span id="page_count"></span></span>
    </div>
    <div>
      <label for="scaleSelect">缩放:</label>
      <input type="range" id="scaleSelect" min="0.5" max="3" step="0.1" value="1.5">
      <span id="scaleValue">1.5</span>
    </div>

    <canvas id="the-canvas"></canvas>
    <script src="./build/pdf.mjs" type="module"></script>
    <script src="./build/pdf.worker.mjs" type="module"></script>

    <script type="module">
      import * as pdfjsLib from "./build/pdf.mjs";

      // 设置 workerSrc 属性
      pdfjsLib.GlobalWorkerOptions.workerSrc = "./build/pdf.worker.mjs";

      var url = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";

      var pdfDoc = null;
      var pageNum = 1;
      var pageRendering = false;
      var pageNumPending = null;
      var scale = 1.5;
      var canvas = document.getElementById("the-canvas");
      var ctx = canvas.getContext("2d");

      // 更新缩放值
      function updateScale() {
        scale = parseFloat(document.getElementById("scaleSelect").value);
        document.getElementById("scaleValue").textContent = scale;
        queueRenderPage(pageNum);
      }

      // 监听缩放滑块的变化
      document.getElementById("scaleSelect").addEventListener("input", updateScale);

      /**
       * 异步下载 PDF。
       */
      pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById("page_count").textContent = pdfDoc.numPages;

        // 初始/第一页渲染
        renderPage(pageNum);
      });

      /**
       * 从文档中获取页面信息，调整画布大小并渲染页面。
       * @param num 页面编号。
       */
      function renderPage(num) {
        pageRendering = true;
        // 使用 promise 获取页面
        pdfDoc.getPage(num).then(function (page) {
          var viewport = page.getViewport({ scale: scale });
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          // 将 PDF 页面渲染到画布上下文中
          var renderContext = {
            canvasContext: ctx,
            viewport: viewport,
          };
          var renderTask = page.render(renderContext);

          // 等待渲染完成
          renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
              // 新页面渲染正在等待
              renderPage(pageNumPending);
              pageNumPending = null;
            }
          });
        });

        // 更新页面计数器
        document.getElementById("page_num").textContent = num;
      }

      /**
       * 如果另一个页面正在渲染，等待渲染完成。否则，立即执行渲染。
       */
      function queueRenderPage(num) {
        if (pageRendering) {
          pageNumPending = num;
        } else {
          renderPage(num);
        }
      }

      /**
       * 显示上一页。
       */
      function onPrevPage() {
        if (pageNum <= 1) {
          return;
        }
        pageNum--;
        queueRenderPage(pageNum);
      }
      document.getElementById("prev").addEventListener("click", onPrevPage);

      /**
       * 显示下一页。
       */
      function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
          return;
        }
        pageNum++;
        queueRenderPage(pageNum);
      }
      document.getElementById("next").addEventListener("click", onNextPage);
    </script>
  </body>
</html>
